HMod.winSize(500, 170 * 5);
window.onload = function(){
    var tbody = [
        ["body-1-1", "body-1-2", "body-1-3", "body-1-4"]
        ,["body-2-1", "body-2-2", "body-2-3", "body-2-4"]
        ,["body-3-1", "body-3-2", "body-3-3", "body-3-4"]
        ,["body-4-1", "body-4-2", "body-4-3", "body-4-4"]
        ,["body-5-1", "body-5-2", "body-5-3", "body-5-4"]
        ,["body-6-1", "body-6-2", "body-6-3", "body-6-4"]
        ,["body-7-1", "body-7-2", "body-7-3", "body-7-4"]
        ,["body-8-1", "body-8-2", "body-8-3", "body-8-4"]
        ,["body-9-1", "body-9-2", "body-9-3", "body-9-4"]

    ];

    //////////////// 1
    /** @type {HMOD_TABLE_CFG} */
    var table_cfg = {
        thead: ["表头-1", "表头-2", "表头-3", "表头-4"],
        tbody: tbody
    };
    HMod.createTable(document.getElementById("table_content_1"), table_cfg).setData();

    //////////////// 2
    table_cfg = {
        thead: [
            ["表头-1", "表头-2", "表头-3", "表头-4"],
            ["表头2-1", "表头2-2", "表头2-3", "表头2-4"]
        ],
        tbody: tbody
    };
    HMod.createTable(document.getElementById("table_content_2"), table_cfg).setData();

    //////////////// 3
    var table3 = HMod.createTable(document.getElementById("table_content_3"), table_cfg);
    table3.theadLabels[0].style.backgroundColor = "#e07e37";
    table3.theadLabels[1].style.backgroundColor = "#3dc55a";
    table3.setData();

    //////////////// 4
    table_cfg = {
        thead: ["表头-1", "表头-2", "表头-3", "表头-4"],
        tbody: tbody,
        /**
         * 每一格回调
         * @param item {HTMLElement}
         * @param data {string} 原数据
         */
        addItem: function(item, data){
            item.innerHTML = item.row + "行" + (item.index + 1) + "列";
        }
    };
    var table4 = HMod.createTable(document.getElementById("table_content_4"), table_cfg);
    table4.setData();
    
    var tbodyLabels = table4.tbodyLabels; //这个要在setData之后获取，只有设置数据后才能拿到数据
    for (var i = 0; i < tbodyLabels.length; i++) {
        if(i % 2 == 0) {
            tbodyLabels[i].style.backgroundColor = "#e9e9e9";
        }
    }
    

    //////////////// 4
    table_cfg = {
        thead: ["表头-1", "表头-2", "表头-3", "表头-4"],
        tbody: tbody,
        lineHeight: 35,
        scrollBarWidth: 10,
        /**
         * 每一格回调
         * @param item {HTMLElement}
         * @param data {string} 原数据
         */
        addItem: function(item, data){
            if(item.index == 0) {
                // item.innerHTML = '<img height=35 src="./cxk.jpg" />';
                item.innerHTML = '<img height=35 src="./cxk.jpg" />';
                return;
            }
            item.innerHTML = data[item.index];
        }
    };
    HMod.createTable(document.getElementById("table_content_5"), table_cfg).setData();



}